<template>
    <div class="home">
        <div class="body">
            <div class="title">物料提醒</div>
            <el-table
                :data="listInfo"
                :row-style="tableRowStyle"
                :header-cell-style="tableHeaderColor"
                style="width: 100%;font-size:16px;"
                height="16.5rem"
                default-expand-all
            >
                <el-table-column type="expand" style="border:solid 1px red;">
                    <template slot-scope="scope">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <th style="width:5%">序号</th>
                                <th style="width:15%">垛号</th>
                                <th style="width:10%">物料类型</th>
                                <th>仓库</th>
                                <th style="width:15%">库位编号</th>
                                <th style="width:15%">库位名称</th>
                                <th style="width:15%">配送数量{{(scope.row.MaterielTypeCodes==='F' || scope.row.MaterielTypeCodes==='M')?'（克）':''}}</th>
                                <th style="width:10%">状态</th>
                            </tr>
                            <tr v-for="(item,index) in scope.row.Shelf" :key="index">
                                <td v-html="index+1"></td>
                                <td v-html="item.BarCode"></td>
                                <td v-html="scope.row.MaterielTypeNames"></td>
                                <td v-html="item.WarehouseName"></td>
                                <td v-html="item.HouseCode"></td>
                                <td v-html="item.HouseName"></td>
                                <td v-html="item.TotalCount"></td>
                                <td>
                                    <span v-if="item.Status===2" style="color:#8a8a8a">配送完成</span>
                                    <span v-if="item.Status===1" style="color:#1ed23c">已下架</span>
                                    <span v-if="item.Status===0" style="color:#fff">待下架</span>
                                </td>
                            </tr>
                        </table>
                    </template>
                </el-table-column>
                <el-table-column label="序号" width="80" align="center">
                    <template slot-scope="scope">{{scope.$index+1}}</template>
                </el-table-column>
                <el-table-column prop="RequisitionType" label="叫料类型" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.RequisitionType===0?'临时叫料':'计划叫料'}}</template>
                </el-table-column>
                <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
                <el-table-column prop="OrderOuterCode" label="叫料单号" width="200" align="center"></el-table-column>
                <el-table-column prop="OrgName" label="生产车间" width="150" align="center"></el-table-column>
                <!-- <el-table-column prop="MaterielTypeNames" label="物料类型" width="150" align="center"></el-table-column> -->
                <el-table-column prop="BomColorName" label="型号" width="150" align="center"></el-table-column>
                <el-table-column prop="BomSpecName" label="规格" width="150" align="center"></el-table-column>
                <el-table-column prop="EndStockTime" label="备货截止时间" width="150" align="center">
                    <template slot-scope="scope">{{$moment(scope.row.EndStockTime).format('YYYY-MM-DD HH:mm')}}</template>
                </el-table-column>
                <el-table-column prop="DeliveryTime" label="配送时间" width="150" align="center">
                    <template slot-scope="scope">{{$moment(scope.row.DeliveryTime).format('YYYY-MM-DD HH:mm')}}</template>
                </el-table-column>
                <el-table-column prop="PlanDeliveryCount" label="计划备货数量（套）" width="150" align="center"></el-table-column>
                <el-table-column prop="RealDeliveryCount" label="实际备货数量（套）" width="150" align="center"></el-table-column>
                <el-table-column prop="Status" label="状态" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.DictCodeName}}</template>
                </el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import {GetMaterialRequisitionByHouseID} from '@/api/tailoring'
export default {
  name: 'incomeremindindex',
  data () {
    return {
    //   listInfo: [
    //     { CompanyName: '中国远标集团有限公司',
    //       OrderNum: 'OR123456789',
    //       Workshop: '1号裁剪房',
    //       MaterielType: 'C',
    //       Color: '深红（1815）',
    //       Spec: '均码',
    //       Endtime: '2020-12-04 :17:21:00',
    //       Sendtime: '2020-12-04 :17:21:00',
    //       PlanCount: 2000,
    //       ActualCount: 3000,
    //       IsComplete: 1,
    //       Children: [
    //         {BarCode: '8888', Warehouse: '1号裁片库', Location: '2-2-1', SendCount: 3000, Status: 1},
    //         {BarCode: '999922', Warehouse: '1号裁片库33334', Location: '2-2-2', SendCount: 1000, Status: 0}
    //       ]}
    //   ]
      listInfo: [],
      listInter: null
    }
  },
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    GetMaterialRequisitionByHouseID () {
      let vm = this
      let params = new FormData()
      params.append('HouseIDs', vm.warehouseDistinct())
      GetMaterialRequisitionByHouseID(params).then((response) => {
        if (response.data.result) {
          if (response.data.data === '[]') {
            vm.listInfo = []
          } else {
            vm.listInfo = response.data.data
          }
        } else {
          vm.$message(response.data.error)
        }
      })
    }
  },
  mounted: function () {
    // 客户列表
    let vm = this
    vm.GetMaterialRequisitionByHouseID()
    if (vm.listInter === null) {
      vm.listInter = setInterval(() => {
        vm.GetMaterialRequisitionByHouseID()
      }, 5000)
    }
  },
  beforeDestroy: function () {
    let vm = this
    if (vm.listInter !== null) {
      clearInterval(vm.listInter)
      vm.listInter = null
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/css/common.scss";
</style>
<style lang="scss">
.el-table__expand-icon--expanded{
    display: none !important;
}
.el-table__expanded-cell{
    background: rgb(0, 63, 140) !important;
    color: #fff;
    table{
        width: 100%;
        text-align: center;
        tr{
            td,th{
                background: rgb(0, 63, 140);
                text-align: center;
                border-bottom:solid 1px #3063a2 ;
                border-right: solid 0.013333rem #3063a2;
            }
            td,th:first-child{
                border-left: solid 0.013333rem #3063a2;
            }
            th{
                border-top: solid 0.013333rem #3063a2;
            }
        }
    }
}
.el-table >>> tbody tr:hover>td { background-color: 'rgb(0, 63, 140)' }
</style>